<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>This is Activity Edit Page</h1>
	<form>
		<table>
			<tr>
				<td>标题</td>
			</tr>
			<tr>
				<td><input type="text" id="titleId" name="title"></td>
			</tr>
			<tr>
				<td>类型</td>
			</tr>
			<tr>
				<td><input type="text" id="categoryId" name="category" ></td>
			</tr>
			<tr>
				<td>开始时间</td>
			</tr>
			<tr>
				<td><input type="text" id="startTimeId" name="startTime" ></td>
			</tr>
			<tr>
				<td>结束时间</td>
			</tr>
			<tr>
				<td><input type="text" id="endTimeId" name="endTime" ></td>
			</tr>
			<tr>
				<td>备注</td>
			</tr>
			<tr>
				<td><textarea rows="5" cols="23" id="remarkId" name="remark" ></textarea></td>
			</tr>
			<tr>
				<td>创建人</td>
			</tr>
			<tr>
				<td><input type="text" id="createdUserId" name="createdUser" ></td>
			</tr>
			<tr>
				<td><input type="button" value="save" onclick="doSaveActivity()"></td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
	function doAjaxPost(url, params, callback) {
			//1.创建ajax异步请求对象XmlHttpRequest（这也是ajax技术应用的入口对象）
			var xhr = new XMLHttpRequest();
			//2.设置请求，响应过程的状态监听（通过回调函数处理状态变化）
			xhr.onreadystatechange = function() {//callback(回调函数)
				//基于xhr对象获取的通讯状态，对响应数据进行处理
				//4表示通讯结束
				//200表示服务端响应ok
				if (xhr.readyState == 4 && xhr.status == 200) {//500表示服务端出错了
					//服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
					callback(xhr.responseText);
				}
			};
			//3.创建与服务端的连接
			xhr.open("POST", url, true);//true表示异步
			//post请求必须要设置次请求头
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//4.发送异步post请求，参数写到send方法中
			xhr.send(params); 
			//5.对响应结果进行处理(在回调函数中处理)。
		}
		
		function $(id){
			return document.getElementById(id);
		}
		function doSaveActivity(){
			//1.定义请求参数
			//var title = document.getElementById("titleId").value;
			var title=$("titleId").value;
			var category=$("categoryId").value;
    	    var startTime=$("startTimeId").value;
    	    var endTime=$("endTimeId").value;
    	    var remark=$("remarkId").value;
    	    var createdUser=$("createdUserId").value;
			var params="title="+title+"&category="+category+"&startTime="+startTime+"&endTime="+endTime+"&remark="+remark+"&createdUser="+createdUser;
			//2.定义请求的URL
			var url = "doSaveActivity";
			//3.发送Ajax异步请求更新数据
			doAjaxPost(url,params,function(result){
				alert(result);
				location.href="doActivityUI";
			});
		}
	</script>
</body>
</html>